<template>
    <div>
        <div id="main" :style="{ width: '100%', height: '400px' }" ></div>
        <!-- <button @click="isUN=!isUN">销毁</button> -->
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    data() {
        return{
            option:{},
            isUN: true,
        }
    },
    created() {
        console.log('实例初始化创建之后', this.title, document.querySelector('#main'));
        this.option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                }
            ]
        }
    },
    mounted() {         //实例挂载完成
        console.log('实例挂载之后', document.querySelector('#main'),);
        
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表 使用
        myChart.setOption(this.option);
        window.onresize = () => {
            console.log('resize');
            myChart.resize();
        }
    },
    unmounted() {
        console.log('实例销毁之后');
        // 监听器解绑  
        window.onresize = null
    },
}
</script>